<template>
  <el-dialog
          :model-value="visible"
          title="详情"
          @close="dialogClose"
          width="45%"
  >

     <el-form :model="row" ref="formRef" :rules="formRules" label-width="125px">
        <el-form-item label="提醒名称：" prop="name">
          <el-input v-model="row.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="提醒类型：" prop="type">
           <el-radio-group v-model="row.type" disabled>
              <el-radio border :label='1' >工作提醒</el-radio>   <!-- label是字符串，:label是数字-->
              <el-radio border :label='2' >任务提醒</el-radio>
              <el-radio border :label='3' >其他提醒</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="提醒方式：" prop="way">
           <el-radio-group v-model="row.way" disabled>
              <el-radio border :label='1' >邮箱</el-radio>   <!-- label是字符串，:label是数字-->
              <el-radio border :label='2' >钉钉</el-radio>
              <el-radio border :label='3' >企业微信</el-radio>
            </el-radio-group>
        </el-form-item>
         <el-form-item label="邮箱收件人：" prop="user" v-if="row.way==1" >
           <el-select class="m-2" filterable multiple v-model="row.user" @click="getUser" placeholder="请选择邮件收件人" disabled>
                <el-option v-for="row in user" :key="row.id" :label="row.first_name" :value="row.id">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="钉钉：" prop="dingding_webhook" v-if="row.way==2">
            <el-input v-model="row.dingding_webhook" placeholder="请输入钉钉webhook" disabled></el-input>
          </el-form-item>
          <el-form-item label="企业微信：" prop="weixin_webhook" v-if="row.way==3">
            <el-input v-model="row.weixin_webhook" placeholder="请输入企业微信webhook" disabled></el-input>
          </el-form-item>
        <el-form-item label="最后提醒时间：" prop="last_datetime">
             <el-date-picker v-model="row.last_datetime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" disabled>
            </el-date-picker>
        </el-form-item>
         <el-form-item label="提前天数：" prop="advance">
            <el-input v-model="row.advance" disabled></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="note">
            <el-input v-model="row.note" disabled type="textarea"></el-input>
          </el-form-item>
         <el-form-item label="创建时间：" prop="create_time">
          <el-input v-model="row.create_time" disabled></el-input>
         </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogClose">取消</el-button>
        </span>
      </template>

  </el-dialog>
</template>

<script>
    export default {
        props: {
            visible: Boolean,
            row: '',  // 当前行内容
        },
        data(){
            return{
                user: '',
            }
        },
        methods: {
          dialogClose() {
            this.$emit('update:visible', false);  // 当对话框关闭，通过父组件更新为false
            this.$parent.getData();
          },
          getUser() {
            this.$http.get('/config/user/?page_size=50')
                .then(res => {
                    this.user = res.data.data;
                });
            },
        },
        watch: {
             visible() {
                if(this.visible){  // 关闭窗口不请求
                    const user = this.row.user;
                    this.row.user = []; // [1,5,3]
                    for(let i in user) {
                        this.row.user.push(user[i].id)
                    }

                    this.getUser();
                }
            }
        }
    }
</script>

<style scoped>
/*.el-dialog div  {*/
/*    overflow: auto;*/
/*}*/
</style>